/*
 * 公共设置
 * */
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
  //入口文件配置
  entry: {
    //可以配置多个入口文件
    main: path.resolve(__dirname, '../src/index')
  },
  //出口文件配置
  output: {
    //打包的路径
    path: path.resolve(__dirname, '../dist'),
    //打包的文件名称
    filename: '[name].[hash:8].js',
    //公共路径
    publicPath: ''
  },
  //公共模块
  module: {
    rules: [
      //  使用vue-loader 加载 .vue 结尾的文件
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        exclude: /node_modules/
      },
      //babel语法转换规则
      //npm i babel-loader babel-core babel-preset-env babel-preset-react -D
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        //file-loader 解决css等文件中引入图片路径的问题
        // url-loader 当图片较小的时候会把图片BASE64编码，大于limit参数的时候还是使用file-loader 进行拷贝
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        use: {
          loader: 'url-loader',
          options: {
            outputPath: 'assets/images/', // 图片输出的路径
            name: '[name].[hash:8].[ext]',
            limit: 5 * 1024
          }
        }
      },
      //加载字体图标
      {
        test: /\.(woff|woff2|svg|eot|ttf|otf)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: 'assets/fonts/[name].[hash:8].[ext]'
          }
        }
      },
      //html中引入img
      {
        test: /\.(html|htm)$/,
        use: 'html-withimg-loader'
      }
    ]
  },
  //插件
  plugins: [
    //加载vue
    new VueLoaderPlugin(),
    //生产模板
    new HtmlWebpackPlugin({
      title: '测试', //生成HTML文件的title，设置template没用
      filename: './index.html', //打包后html文件名
      template: path.resolve(__dirname, '../public/index.html'), // 模板的路径
      inject: 'body', //生成的js文件插入到的位置，四个选项值 true(body 底部), body(body 底部), head(head 标签内), false(单纯的生成一个html 文件).
      favicon: '', // html 文件生成一个 favicon
      hash: true, //给生成的js文件hash 值
      minify: {
        //压缩HTML文件
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: true, //删除空白符与换行符
        conservativeCollapse: true,
        minifyJS: true //js也在一行
      }
    })
  ],
  //后缀名自动补全
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '../src'),
      vue$: 'vue/dist/vue.js' //设置vue的别名
    },
    extensions: ['.js', '.jsx', '.vue', '.less', '.scss', '.css']
  },
  //项目里配置了自动提取node_modules里用到的模块如jquery，也可以在原模板里面通过第三方cdn引入，又是另一种配置了。在 webpack.base.conf.js利配置externals后webpack就不会去打包配置模块
  externals: {
    //'jquery': 'window.jQuery'
  }
  //externals就是webpack可以不处理应用的某些依赖库，使用externals配置后，依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。
};
